<template>
  <h2>n={{ n }}</h2>
  <button @click="n++">n++</button>
  <h2>姓名：{{ user.name }}</h2>
  <h2>年龄：{{ user.age }}</h2>
  <h2>薪水：{{ user.job.salary }}K</h2>
  <button @click="updateName">修改姓名</button>
  <button @click="user.age++">修改年龄</button>
  <button @click="user.job.salary++">修改薪水</button>
</template>

<script lang="ts">
import { reactive, readonly, ref } from "vue";
export default {
  setup() {
    let n = ref(0);
    let user = reactive({
      name: "rose",
      age: 99,
      job: {
        salary: 30,
      },
    });

    //将user转换成一个只读的对象,[Vue warn] Set operation on key "name" failed: target is readonly.
    user = readonly(user);
    //readonly可以转换refImpl类型的数据为只读
    n = readonly(n);

    console.log(user);

    let updateName = () => {
      user.name += "%";
      console.log(user);
    };
    return { user, updateName, n };
  },
};
</script>
